.screen-Layout {
    position: relative;
    width: 100vw;
    height: 100vh;

    .range-map-container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .range {
        position: relative;
        padding-bottom: 10px;

        &:last-child {
            padding-bottom: 0;
        }
    }

    .range-header {
        position: relative;
        height: 80px;
        width: 100%;
    }

    .range-content {
        position: relative;
        height: calc(100% - 80px);
        width: 100%;
    }



    .range-w50-h100 {
        width: 50%;
        height: 100%;
    }

    .range-w33-h100 {
        width: calc(100% / 3);
        height: 100%;
    }

    .range-w66-h100 {
        width: calc((100% / 3) * 2);
        height: 100%;
    }

    .range-w25-h100 {
        width: 25%;
        height: 100%;
    }

    .range-w75-h100 {
        width: 75%;
        height: 100%;
    }

    .range-h33-w100 {
        height: calc(100% / 3);
        width: 100%;
    }

    .range-h66-w100 {
        height: calc((100% / 3) * 2);
        width: 100%;
    }

    .range-padding {
        padding: 10px;
        // background: rgba($color: #000000, $alpha: 1.0);
    }
}


.hide-scrollbar {
    ::-webkit-scrollbar {
        z-index: 11;
        width: 0;

        &:horizontal {
            height: 0;
        }

        &-thumb {
            border-radius: 5px;
            width: 0;
            background: transparent;
        }

        &-corner {
            background: transparent;
        }

        &-track {
            background: transparent;

            &-piece {
                background: transparent;
                width: 0;
            }
        }
    }
}